<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>图表统计</title>
    <link rel="stylesheet" href="./libs/bootstrap/css/bootstrap.min.css">
    <link rel="stylesheet" href="css/reset.css">
    <link rel="stylesheet" href="css/iconfont.css">
    <link rel="stylesheet" href="css/main.css">
    <script src="./libs/jquery-1.12.4.min.js"></script>
    <script type="text/javascript" src="./libs/echarts.js"></script>
    <script src="./libs/http.js"></script>
    <script src="./js/main_count.js"></script>
</head>

<body>
    <div class="container-fluid">
        <div class="row spannel_list">
            <div class="col-sm-3 col-xs-6">
                <div class="spannel">
                    <em>10015</em><span>篇</span>
                    <b>总文章数</b>
                </div>
            </div>
            <div class="col-sm-3 col-xs-6">
                <div class="spannel scolor01">
                    <em>123</em><span>篇</span>
                    <b>日新增文章数</b>
                </div>
            </div>
            <div class="col-sm-3 col-xs-6">
                <div class="spannel scolor02">
                    <em>35</em><span>条</span>
                    <b>评论总数</b>
                </div>
            </div>
            <div class="col-sm-3 col-xs-6">
                <div class="spannel scolor03">
                    <em>123</em><span>条</span>
                    <b>日新增评论数</b>
                </div>
            </div>
        </div>
    </div>

    <div class="container-fluid">
        <div class="row curve-pie">
            <div class="col-lg-8 col-md-8">
                <div class="gragh_pannel" id="curve_show"></div>
            </div>
            <div class="col-lg-4 col-md-4">
                <div class="gragh_pannel" id="pie_show"></div>
            </div>
        </div>
    </div>

    <div class="container-fluid">
        <div class="column_pannel" id="column_show"></div>
    </div>


    <!-- 折线图 -->
    <script>
        var obj
        $.ajax({
            url: BigNews.data_article,
            type: 'get',
            dataType: 'json',
            success: function (backData) {
                console.log(backData);
                FenEchers(backData)
            }
        })
        function FenEchers(backData) {
            obj = backData
            // for (let i = 0; i < backData.date.length; i++) {
            //     console.log(backData.date[i]);
            //     data.push(backData.date[i].count)
            //     date.push(backData.date[i].date)
            // }
            // console.log(data, date);

            // console.log(obj);
            // var json = '{"code":200,"msg":"获取成功","date":[{"date":"2019-05-20","count":23},{"date":"2019-05-21","count":19},{"date":"2019-05-22","count":29},{"date":"2019-05-23","count":24},{"date":"2019-05-24","count":28},{"date":"2019-05-25","count":28},{"date":"2019-05-26","count":19},{"date":"2019-05-27","count":25},{"date":"2019-05-28","count":25}]}';
            // var obj = JSON.parse(json);
            loadEchars(obj);

            function loadEchars(obj) {
                // 基于准备好的dom，初始化echarts实例
                var myChart = echarts.init(document.getElementById('curve_show'));

                var data = [];
                var date = [];
                for (var i = 0; i < obj.date.length; i++) {
                    data.push(obj.date[i].count);
                    date.push(obj.date[i].date);
                }

                option = {
                    tooltip: {
                        trigger: 'axis',
                        position: function (pt) {
                            return [pt[0], '10%'];
                        }
                    },
                    title: {
                        left: 'center',
                        text: '月新增文章数',
                    },

                    xAxis: {
                        name: '日',
                        type: 'category',
                        boundaryGap: false,
                        data: date
                    },
                    legend: {
                        data: ['新增文章'],
                        top: '40'
                    },
                    toolbox: {
                        show: true,
                        feature: {
                            dataZoom: {
                                yAxisIndex: 'none'
                            },
                            dataView: { readOnly: false },
                            magicType: { type: ['line', 'bar'] },
                            restore: {},
                            saveAsImage: {}
                        },
                        right: 50
                    },
                    yAxis: {
                        type: 'value',
                        boundaryGap: [0, '100%']
                    },
                    series: [
                        {
                            name: '新增文章',
                            type: 'line',
                            smooth: true,
                            // symbol: 'none',
                            sampling: 'average',
                            itemStyle: {
                                color: '#f80'
                            },
                            areaStyle: {
                                color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
                                    offset: 0,
                                    color: 'rgba(255,136,0,0.39)'
                                }, {
                                    offset: .34,
                                    color: 'rgba(255,180,0,0.25)'
                                },
                                {
                                    offset: 1,
                                    color: 'rgba(255,222,0,0.00)'
                                }])
                            },
                            data: data
                        }
                    ],
                }
                // 使用刚指定的配置项和数据显示图表。
                myChart.setOption(option);
            }
        }
    </script>

    <!-- 环形图 -->
    <script>
        $.ajax({
            url: BigNews.data_category,
            type: 'get',
            dataType: 'json',
            success: function (backData) {
                let data = []
                let date = []
                console.log(backData);
                for (let i = 0; i < backData.date.length; i++) {
                    // console.log(backData.date[i]);
                    data.push(backData.date[i].name)
                    let obj = {}
                    obj.name = backData.date[i].name
                    obj.value = backData.date[i].articles
                    if (obj.value == 0) {
                        break
                    }
                    date.push(obj)

                };
                // console.log(data, date);
                fenEcharts(data, date)
            }
        })
        function fenEcharts(data, date) {
            // 基于准备好的dom，初始化echarts实例
            var myChart1 = echarts.init(document.getElementById('pie_show'));

            option1 = {
                title: {
                    left: 'center',
                    text: '分类文章数量比',
                },
                tooltip: {
                    trigger: 'item',
                    formatter: "{a} <br/>{b}: {c} ({d}%)"
                },
                legend: {
                    orient: 'horizontal',
                    x: 'center',
                    data: data,
                    top: 30
                },
                color: ['#5885e8', '#13cfd5', '#00ce68', '#ff9565', '#20ff19'],
                series: [
                    {
                        name: '分类名称',
                        center: ['50%', '55%'],
                        type: 'pie',
                        radius: ['40%', '60%'],
                        avoidLabelOverlap: false,
                        label: {
                            emphasis: {
                                show: true,
                                textStyle: {
                                    fontSize: '30',
                                    fontWeight: 'bold'
                                }
                            }
                        },
                        data: date
                    }
                ]
            };
            // 使用刚指定的配置项和数据显示图表。
            myChart1.setOption(option1);
        }
    </script>
    <!-- 柱状图 -->
    <script>
        // 基于准备好的dom，初始化echarts实例
        var myChart2 = echarts.init(document.getElementById('column_show'));

        option2 = {
            title: {
                left: 'center',
                text: '分类访问量',
            },
            tooltip: {
                trigger: 'axis',
                axisPointer: {            // 坐标轴指示器，坐标轴触发有效
                    type: 'line'        // 默认为直线，可选为：'line' | 'shadow'
                },

            },
            legend: {
                data: ['爱生活', '趣美味', '爱旅行', '爱电影', '爱保健'],
                top: 30
            },
            grid: {
                left: '3%',
                right: '4%',
                bottom: '3%',
                containLabel: true
            },
            xAxis: [
                {
                    type: 'category',
                    data: ['一月', '二月', '三月', '四月']
                }
            ],
            yAxis: [
                {
                    type: 'value'
                }
            ],
            color: ['#5885e8', '#13cfd5', '#00ce68', '#ff9565', '#20ff19'],
            series: [
                {
                    name: '爱生活',
                    type: 'bar',
                    data: [320, 332, 301, 334]
                },
                {
                    name: '趣美味',
                    type: 'bar',
                    data: [220, 132, 101, 134]
                },
                {
                    name: '爱旅行',
                    type: 'bar',
                    data: [220, 182, 191, 234]
                },
                {
                    name: '爱电影',
                    type: 'bar',
                    data: [150, 232, 201, 154]
                },
                {
                    name: '爱保健',
                    type: 'bar',
                    data: [262, 118, 364, 426],
                },

            ]
        };


        // 使用刚指定的配置项和数据显示图表。
        myChart2.setOption(option2);
    </script>
</body>

</html>